<template>
	<div class="orderDetails">
		<van-nav-bar left-arrow  @click-left="onClickLeft">
			<template #right>
				<van-icon name="search" size="18" />
			</template>
		</van-nav-bar>
		<div>
			<van-notice-bar left-icon="volume-o" color="#999999" wrapable :scrollable="false" background="#fff8ed"
				text="受疫情影响，若你选择无接触配送，请及时收取餐品；多人用餐，建议分餐并使用公勺公筷。" />
			<div class="deliveryTime ">
				<div class="xiu_time">
					<span class="one">预计<span style="color: #ffcc33">14:00</span>送达</span>
					<span class="two">商家自配</span>
				</div>
				<van-grid>
					<van-grid-item icon="close" text="取消订单" />
					<van-grid-item icon="shop-collect-o" text="联系商家" />
				</van-grid>
				<van-notice-bar left-icon="coupon-o" :scrollable="false" mode="closeable" text="确认收货后，反满48减6商家劵" />
			</div>
			<div class="advertising">
				<div class="chwl"><span style="font-size: 20px;font-weight: bold">吃喝玩乐推荐</span></div>
				<div class="buju">
					<div class="chwl_info" v-for="index in ploy" :key="index">
						<div>
							<van-image width="170" fit="cover" height="120" radius="10" :src="index.tuUrl" />
							<span>{{ index.name }}</span>
						</div>
						<span style="color: red;font-weight: bold">￥{{ index.jiage }}</span>
					</div>
				</div>
			</div>
			<div class="dz_info">
				<div class="chwl">
					<span style="font-size: 20px;font-weight: bold">{{shopName}}</span>
					<van-icon name="arrow" />
				</div>
				<div class="dd_info">
					<van-image fit="cover" radius="5px" width="100" height="100" :src="dishesPhotoOrVideoUrl" />
					<div class="dd_info_fiyi">
						<div class="numone">
							<div>{{dishesName}}</div>
							<div>
								<span style="color:#999999;text-decoration:line-through">{{startingPrice}}</span>
								￥{{price}}
							</div>
						</div>
						<div>×{{number}}</div>
					</div>
				</div>
				<div class="juli">
					<div><span>打包费</span><span>￥{{packingFeePerDish}}</span></div>
					<div><span>配送费</span><span>￥{{deliveryFee}}</span></div>
				</div>
				<div class="dada">
					<div class="zhu_hb">
						<div class="hb">
							<van-image :src="hb" />
							<span>吃了么红包</span>
						</div>
						<div>-￥{{preferentialAmount}}</div>
					</div>
					<div class="zhu_hb">
						<div class="hb">
							<van-image :src="fl" />
							<span>满返商家代金券优惠</span>
						</div>
						<div>-￥7</div>
					</div>
				</div>
				<div class="youhui">
					<span
						style="font-size: 24px ;font-weight: bold">￥{{sum}}</span>合计<span
						style="color:red;">￥27.0</span>已优惠
				</div>
				<van-grid direction="horizontal" :column-num="3">
					<van-grid-item icon="chat-o" text="联系商家" />
					<van-grid-item icon="phone-o" text="致电商家" />
				</van-grid>
			</div>
			<div class="peisong">
				<div class="touzi">
					配送信息
				</div>
				<div class="peisong_info">
					<div><span>物流平台</span><span>商家配送</span></div>
					<div><span>期望时间</span><span>今天14:00</span></div>
					<div><span>配送地址</span><span>长沙大计772hao</span></div>
					<div class="si"><span>唐**（先生）180***1227</span></div>
				</div>
			</div>
			<div class="peisong">
				<div class="touzi">
					订单信息
				</div>
				<div class="peisong_info">
					<div><span>订单号码</span><span><span>{{orderNo}}</span><input type="button" value="复制"/></span></div>
					<div><span>下单时间</span><span>2022-3-16&nbsp;23:03:08</span></div>
					<div><span>支付方式</span><span>在线支付</span></div>
					<div><span>订单备注</span><span>【如遇缺货】缺货时电话与我沟通</span></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import hongbao from "../assets/hb.png"
	import fanli from "../assets/fl.png"

	export default {

		data() {
			return {
				order: {},
				preferentialAmount: 0,
				shopName: '',
				dishesPhotoOrVideoUrl: '',
				dishesName: '',
				startingPrice: '',
				price: '',
				number: '',
				deliveryFee: '',
				packingFeePerDish: '',
				address:'',
				sum:'',
				userName:'',
				phoneNumber:'',
				orderNo:'',
				hb: hongbao,
				fl: fanli,
				ploy: [{
						name: "萨勒芬妮",
						jiage: 10.5,
						tuUrl: require("../assets/slfn.png")
					},
					{
						name: "萨勒芬妮",
						jiage: 10.5,
						tuUrl: require("../assets/slfn.png")
					},
					{
						name: "萨勒芬妮",
						jiage: 10.5,
						tuUrl: require("../assets/slfn.png")
					},
				]
			}
		},
		mounted() {
			this.getOrder();
		},
		methods: {
      onClickLeft(){
        this.$router.push('/waiMaiIndex')
      },
			getOrder() {
				// let userId = this.$route.query.id;
				// console.log("userId=" + userId);
				this.$axios.get('/orders/sel',{
					params: {
						orderId:this.$route.query.orderId
					}
				})
					.then(res => {
						// alert(this.order.shop.shopName);
						this.order = res.result.sel;
						this.shopName=this.order.shop.shopName;
						
						this.dishesPhotoOrVideoUrl = this.order.dishes.dishesPhotoOrVideoUrl;
						this.dishesName = this.order.dishes.dishesName;
						this.startingPrice = this.order.dishes.startingPrice
						this.price = this.order.dishes.price
						this.number = this.order.number
						this.deliveryFee = this.order.dishes.deliveryFee
						this.packingFeePerDish = this.order.dishes.packingFeePerDish
						this.address = this.order.user.address
						this.username = this.order.user.username
						this.phoneNumber = this.order.user.phoneNumber
						this.phoneNumber = this.order.user.gender
						this.orderNo = this.order.orderNo						
						this.preferentialAmount = this.$route.query.preferentialAmount || 0;
						this.sum = (this.price * this.number + this.packingFeePerDish + this.deliveryFee - this
							.preferentialAmount).toFixed(2);
					}).catch(error => {
						console.log("error:" + error)
					})
			}
		}
	}
</script>
<style scoped>
	.deliveryTime {
		border: 1px solid #999999;
		margin: 10px;
	}

	.xiu_time {
		height: 70px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #999999;
	}

	.xiu_time .one {
		margin-left: 10px;
		font-size: 24px;
		font-weight: bold;
	}

	.xiu_time .two {
		margin-right: 10px;
		border: 1px solid #999999;
		border-radius: 3px;
		padding: 3px;
	}

	.deliveryTime .van-grid {
		justify-content: space-around;
	}

	.advertising {
		border: 1px solid #999999;
		margin: 10px;
	}

	.chwl {
		padding: 15px 10px 15px 10px;
	}

	.chwl_info {
		width: 170px;
		height: 200px;
		border: 1px solid red;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 12px;
		margin-bottom: 12px;
	}

	.buju {
		display: flex;
		flex-direction: row;
		overflow-y: hidden;
	}

	.dz_info {
		border: 1px solid #999999;
		margin: 10px;
	}

	.dd_info {
		display: flex;
		flex-direction: row;
		padding: 10px 0 10px 0;
		border-bottom: 1px #999999 solid;
		border-top: 1px #999999 solid;
	}

	.dd_info_fiyi {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 70%;
		margin: 0 10px 0 10px;

	}

	.numone {
		display: flex;
		justify-content: space-between;
	}

	.juli div {
		margin: 15px 0 15px 0;
		display: flex;
		justify-content: space-between;
	}

	.dada {
		border-bottom: 1px solid #999999;
		border-top: 1px solid #999999;
	}

	.zhu_hb {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 15px 0 15px 0;
	}

	.hb {
		display: flex;
		align-items: center;
	}

	.youhui {
		display: flex;
		flex-direction: row-reverse;
		padding: 15px 0 15px 0;
		align-items: center;
	}

	.dz_info .van-grid {
		justify-content: space-around;
	}

	.dz_info .van-grid-item__text {
		font-weight: bold;
		color: black;
	}

	.peisong {
		border: 1px solid #999999;
		margin: 10px;
	}

	.touzi {
		margin: 15px 0 15px 0;
		font-weight: bold;
		font-size: 20px;
		border-bottom: 1px solid #999999;
	}

	.peisong_info div {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	.si {
		display: flex;
		flex-direction: row-reverse;
	}
</style>
